<template>
    <div class="main">
         <div class="upload-header" v-if="tState">
            <div class="upload-header-box">
                 <div class="pic">
                    <img src="../../../public/logo.png" alt="" />
                 </div>

            </div>
         </div>
        <Content widths="100%"></Content>
    </div>

</template>

<script>
import Content from '@/components/contentView.vue'
import scroll from '@/util/scroll'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      screenWidth: document.body.clientWidth, // 窗口当前的可视宽度
      tState: true
    }
  },
  components: {
    Content
  },
  mounted () {
    this.isLogin(false)
    // 获取屏幕宽度
    this.getNowWidth()
  },
  watch: {
    screenWidth (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        const that = this

        setTimeout(function () {
          // console.log(that.widths)
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        }, 300)
      }
    }
  },
  methods: {

    ...mapMutations(['isLogin', 'updateTabbar', 'updateMenu', 'navbarHide', 'menusHide']),
    // 获取当前屏幕的高度
    async getNowWidth () {
      this.screenWidth = await scroll.getClientWidth()
      if (this.screenWidth < 540) {
        // 隐藏手机端头部菜单menumini
        this.menusHide(false)
        this.tState = false
        // 显示手机端头部导航栏
        this.navbarHide(true)
        this.isLogin(false)
        this.updateTabbar(true)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
    .upload-header{

        width: 100%;
        z-index: 999;
        height: 54px;
        background: #fff;
        position: sticky;
        top:  0;
        left: 0;
        border-bottom: 1px solid rgb(231, 231, 231);
        .upload-header-box{
            width: 80%;
            margin: 0 auto;
            .pic{
              width: 115px;
              height: 43px;
              margin: 5px 0;
              img{
                width: 100%;
                height: 100%;
              }
            }

        }

    }
</style>
